<template>
  <div id="home">
    <nav-bar>
      <template v-slot:default>图书世界</template>
    </nav-bar>

    <tab-control
      :titles="['畅销', '新书', '精选']"
      @tabClick="tabClick"
      v-show="isTabFixed"
    ></tab-control>

    <div class="wrapper">
      <div class="content">
        <div ref="banref">
          <home-swiper style="margin-top:36px" :banner="banner"></home-swiper>
         
          <recommend-view :recommends="recommends"></recommend-view>
        </div>

        <tab-control
          :titles="['畅销', '新书', '精选']"
          @tabClick="tabClick"
        ></tab-control>
        <goods-list :goods="showGoods"></goods-list>
      </div>
    </div>

    <back-top @bTop="bTop" v-show="isTabFixed"></back-top>
  </div>
</template>
<script>
import goodsList from "components/content/goods/GoodsList";
import homeSwiper from "./childcomp/HomeSwiper.vue";
import backTop from "components/common/backtop/BackTop";
import navBar from "components/common/navbar/NavBar";
import recommendView from "../home/childcomp/RecomendView.vue";
import tabControl from "components/content/tabControl/tabControl.vue";
import { getHomeAllData, getHomeGoods } from "network/home.js";
import { computed, onMounted, reactive, ref, watchEffect, nextTick } from "vue";
import BScroll from "better-scroll";
export default {
  setup() {
    let isTabFixed = ref(false);
    let banref=ref(null)
    const recommends = ref([]);
    let temid = ref(0);
    const goods = reactive({
      sales: { page: 1, list: [] },
      recommend: { page: 1, list: [] },
      new: { page: 1, list: [] },
    });
    let currentType = ref("sales");
    const showGoods = computed(() => {
      return goods[currentType.value].list;
    });
    let bscroll = reactive({});

    let banner=ref([])
    onMounted(() => {
      getHomeAllData().then((res) => {
        //   console.log(recommends);
        //   console.log(demo);
        //   console.log(res.goods);
        recommends.value = res.goods.data;
        banner.value=res.slides
        console.log(res.slides);
      });
      getHomeGoods("sales").then((res) => {
        // console.log(res);
        goods.sales.list = res.goods.data;
        console.log(goods);
      });
      getHomeGoods("recommend").then((res) => {
        // console.log(res);
        goods.recommend.list = res.goods.data;
      });
      getHomeGoods("new").then((res) => {
        // console.log(res);
        goods.new.list = res.goods.data;
      });
      bscroll = new BScroll(document.querySelector(".wrapper"), {
        probeType: 3, //0 1 2 3  3是只要运行就会触发scroll事件
        click: true, //是否允许点击
        pullUpLoad: true, //上拉加载更多，默认false
      });
      bscroll.on("scroll", function (position) {
        // console.log(banref.value.offsetHeight);
        // console.log(-position.y);
        isTabFixed.value=(-position.y)>banref.value.offsetHeight
      });
      bscroll.on("pullingUp", function () {
        //   document.querySelector('.content')
        const page = goods[currentType.value].page + 1;
        getHomeGoods(currentType.value, page).then((res) => {
          goods[currentType.value].list.push(...res.goods.data);
          goods[currentType.value].page += 1;
        });
        bscroll.finishPullUp();
        bscroll.refresh();
      });
    });
    const tabClick = (index) => {
      temid.value = index;
      let types = ["sales", "recommend", "new"];
      currentType.value = types[index];

      nextTick(() => {
        bscroll.refresh() && bscroll;
      });
    };

    // 监听 任何一个变量
    watchEffect(() => {
      nextTick(() => {
        bscroll.refresh() && bscroll;
      });
    });

    const bTop=()=>{
      bscroll.scrollTo(0,0,500)
    }
    return {
      recommends,
      tabClick,
      temid,
      goods,
      showGoods,
      isTabFixed,
      banref,
      bTop,
      banner
    };
  },
  components: {
    navBar,
    recommendView,
    tabControl,
    goodsList,
    backTop,
    homeSwiper
  },
};
</script>
<style lang="less" scoped>
#home {
  height: 100vh;
  position: relative;
  .wrapper {
    position: absolute;
    top: 45px;
    bottom: 50px;
    left: 0;
    right: 0;
    overflow: hidden;
    // background-color: red;
    .content {
      .banner img {
        width: 100%;
        height: auto;
        margin-top: 45px;
      }
    }
  }
}
</style>